<template>
  <page-header-wrapper :title="false">
    <a-card title="编辑店面定位">
      <template #extra> <a-button type="primary" @click="handleEdit(locationCurrent)">保存</a-button></template>
      <div>当前位置:{{ locationCurrent }}</div>
      <div id="container" style="height: 600px"></div>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { updateStoreUsingPOST } from '@/api/api/mendianguanli.ts'
var lat = 26.086692282463
var lng = 119.272813797
var geocoder,
  citylocation,
  map,
  marker = null
export default {
  name: 'MapDetail',
  components: {},
  data() {
    return {
      longitude: 26.086692282463, //经度
      latitude: 119.272813797, //纬度,
      locationCurrent: '中国福建省福州市鼓楼区文林路',
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    handleEdit(data) {
      updateStoreUsingPOST({ gpsAddress: data, id: this.$route.params.id })
        .then(() => {
          this.$message.success('修改成功')
          this.$router.back()
        })
        .catch(() => {
          this.confirmLoading = false
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },

    initMap() {
      var map = new qq.maps.Map(document.getElementById('container'), {
        mapTypeControl: false,
        zoom: 13, //设置地图缩放级别
      })
      geocoder = new qq.maps.Geocoder({
        complete:  (result) =>{
          this.locationCurrent = result.detail.address
        },
      })
      qq.maps.event.addListener(map, 'click', function (event) {
        if (marker) {
          marker.setPosition(event.latLng)
        } else {
          marker = new qq.maps.Marker({
            position: event.latLng,
            dragable: true,
            map: map,
          })
        }
        geocoder.getAddress(event.latLng)
      })
      if (lat == 0 && lng == 0) {
        citylocation = new qq.maps.CityService({
          complete: function (result) {
            map.setCenter(result.detail.latLng)
          },
        })
        citylocation.searchLocalCity()
      } else {
        const center = new qq.maps.LatLng(lat, lng)
        map.setCenter(center)
        marker = new qq.maps.Marker({
          position: center,
          dragable: true,
          map: map,
        })
      }
    },
  },
}
</script>